<!--
 * @Description: 
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-27 00:17:04
-->
<template>

    <div>
        <div class="wraps">
            <div ref="bar" class="bar"></div>
        </div>
    </div>

</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';

let bar = ref<HTMLElement>()

let speed = ref<number>(1)

let timer = ref<number>(0)

const startLoading = () => {
    let dom = bar.value as HTMLElement
    speed.value = 1
    console.log('loadingBar.vue startLoading dom: ', dom)
    window.requestAnimationFrame(function fn() {
        if (speed.value < 90) {
            speed.value += 1
            dom.style.width = speed.value + '%'
            timer.value = window.requestAnimationFrame(fn)
        } else {
            speed.value = 1
            window.cancelAnimationFrame(timer.value)
        }
    })
}

const endLoading = () => {
    let dom = bar.value as HTMLElement
    setTimeout(() => {
        window.requestAnimationFrame(() => {
            speed.value = 100
            dom.style.width = speed.value + '%'
        })
    }, 1000)
}

// onMounted(() => {
//     startLoading()
//     endLoading()
// })

defineExpose({
    startLoading,
    endLoading
})

</script>
<style scoped lang="less">
.wraps {
    position: fixed;
    top: 0;
    width: 100%;
    height: 2px;

    .bar {
        height: inherit;
        width: 0;
        background-color:aqua;
    }
}
</style>